<template>
    <!-- 返回组件 -->
    <van-nav-bar left-arrow @click-left="onClickLeft" />
    <div class="my">

        <!-- 骨架组件 -->
        <van-skeleton title avatar :row="3" :loading="loading">
            <div class="box">
                <div class="left">
                    <div style="width: 1.0667rem; height: 1.0667rem; overflow: hidden; border-radius: 50%;">
                        <img v-if="user_picUrl" :src="user_picUrl" style="width: 1.2rem; vertical-align: middle;" alt="">
                    </div>
                </div>
                <div class="right">
                    <p>昵称：{{ user.info?.user_nick_name }}</p>
                    <p>账号：{{ user.info?.user_acc }}</p>
                    <p>性别: {{ user.info?.user_sex == null ? '尚未设置' : user.info?.user_sex }}</p>
                    <p>地址: {{ user.info?.user_address == null ? '尚未设置' : user.info?.user_address }}</p>
                </div>
            </div>
        </van-skeleton>

        <!-- 列表 -->
        <ul>
            <li>
                <router-link to="/edit">
                    <div>
                        <span>编辑资料</span>
                        <i></i>
                    </div>
                </router-link>
            </li>
            <li>
                <router-link to="/like">
                    <div>
                        <span>我的收藏</span>
                        <i></i>
                    </div>
                </router-link>
            </li>
            <li>
                <router-link to="/remove">
                    <div>
                        <span>注销账号</span>
                        <i></i>
                    </div>
                </router-link>
            </li>
            <li>
                <button @click="logoutFn">退出登录</button>
            </li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { getUserInfo } from '../api/index'
import { showConfirmDialog } from 'vant'

const loading = ref(true)
let user_picUrl: any = ref('')
let user: any = reactive({ info: {} })
// console.log(user)
const $router = useRouter()
const onClickLeft = () => {
    $router.back();
}

// 编写初始化方法
const initFn = async () => {
    // 获取用户资料
    await getUserInfo().then(
        content => {
            console.log('2.0', content)
            if (content.code == 200) {
                let { result } = content;
                // 获取头像
                user_picUrl.value = result[0].user_picUrl;
                // 获取用户其他信息
                user.info = result[0];
                // 显示用户信息
                loading.value = false;
            }
        }
    )
}
initFn();

// 编写方法退出登录
const logoutFn = () => {
    // 弹窗
    showConfirmDialog({
        message: '确定退出登录?',
    })
        .then(
            () => {
                localStorage.removeItem('auto_token')
                $router.push({
                    path: '/login_list'
                })
            },
        )
        .catch(() => {
            // on cancel
        });

}



// 立即执行函数（匿名函数）
// ;(async ()=> {
//     // 获取用户头像
//     await getUserPicUrl().then(
//         content=>{
//             // console.log('9.0',content)
//             if(content.code == 200){
//                 // 设置头像
//                 user_picUrl.value = content.user_url;
//             }
//         }
//     )
// })()



</script>

<style lang="less">
:root {
    --van-nav-bar-icon-color: #000;
}

.my {
    padding-top: .4rem;

    .box {
        padding: 0 .4rem;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        //  justify-content: space-between;
        align-items: flex-start;

        .left {
            padding-right: .2667rem;
        }

        .right {
            flex-grow: 1;

            p {
                height: .7467rem;
                // border-bottom: 1px solid #ccc;
                color: #333;
            }
        }
    }

    ul {
        margin-top: .5333rem;
        padding: 0 .4rem;

        li {
            button {
                background-color: transparent;
                border: 0;
                text-align: center;
            }

            a,
            button {
                display: flex;
                width: 100%;
                height: 1.0667rem;
                line-height: 1.0667rem;
                border-bottom: 1px solid #ccc;
            }

            button {
                display: block
            }

            div {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                i {
                    display: block;
                    width: .64rem;
                    height: .64rem;
                    // background-color:red;
                    background-image: url(../static/img/i-right.png);
                    background-size: .64rem .64rem;
                }
            }
        }
    }
}</style>